<template>
  <div>
    <Loading :loading="loading">
      <Form :ref="formRef" :rules="formDataCheckRules" :label-width="130" :model="formData">
         <FormItem prop="sn" label="商户编号:" style="width:70%">
          <Input type="text" v-model="formData.sn" placeholder="请输入" />
        </FormItem>
        <FormItem prop="name" label="商户名称:" style="width:70%">
          <Input type="text" v-model="formData.name" placeholder="请输入" />
        </FormItem>
        <FormItem prop="num" label="纳税人识别号:" style="width:70%">
          <Input type="text" v-model="formData.num" placeholder="请输入" />
        </FormItem>
        <FormItem prop="legalPersonName" label="法人代表:" style="width:70%">
          <Input type="text" v-model="formData.legalPersonName" placeholder="请输入" />
        </FormItem>
        <FormItem prop="contactsName" label="联系人:" style="width:70%">
          <Input type="text" v-model="formData.contactsName" placeholder="请输入" />
        </FormItem>
        <FormItem prop="phone" label="联系人手机号:" style="width:70%">
          <Input type="text" v-model="formData.phone" placeholder="请输入" />
        </FormItem>
        <FormItem prop="email" label="联系人邮箱:" style="width:70%">
          <Input type="text" v-model="formData.email" placeholder="请输入" />
        </FormItem>
        <FormItem prop="businessMobile" label="企业电话:" style="width:70%">
          <Input type="text" v-model="formData.businessMobile" placeholder="请输入" />
        </FormItem>
        <FormItem prop="bankName" label="银行名称:" style="width:70%">
          <Input type="text" v-model="formData.bankName" placeholder="请输入" />
        </FormItem>
        <FormItem prop="bankAccount" label="银行账号:" style="width:70%">
          <Input type="text" v-model="formData.bankAccount" placeholder="请输入" />
        </FormItem>
        <FormItem prop="cityName" label="城市:" style="width:70%">
          <Input type="text" v-model="formData.cityName" placeholder="请输入" />
        </FormItem>
        <FormItem prop="address" label="商户地址:" style="width:70%">
          <Input type="text" v-model="formData.address" placeholder="请输入" />
        </FormItem>
        <FormItem prop="state" label="开票范围:" style="width:70%">
          <Select v-model="formData.state" placeholder="请选择">
            <Option value="0">无效</Option>
            <Option value="1">有效</Option>
            <Option value="2">禁止开蓝票</Option>
            <Option value="3">禁止冲红</Option>
          </Select>
        </FormItem>
        <FormItem prop="drawer" label="开票人:" style="width:70%">
          <Input type="text" v-model="formData.drawer" placeholder="请输入" />
        </FormItem>
        <FormItem prop="reviewer" label="复核人:" style="width:70%">
          <Input type="text" v-model="formData.reviewer" placeholder="请输入" />
        </FormItem>
        <FormItem prop="payee" label="收款人:" style="width:70%">
          <Input type="text" v-model="formData.payee" placeholder="请输入" />
        </FormItem>
        <FormItem prop="terminalCode" label="税盘号:" style="width:70%">
          <Input type="text" v-model="formData.terminalCode" placeholder="请输入" />
        </FormItem>
        <FormItem prop="register" label="注册商灯平台:" style="width:70%">
          <i-switch v-model="formData.register" @on-change="onChangeRegister" />
        </FormItem>
        <FormItem prop="taxRegistrationCert" label="税务登记证图片:" style="width:70%">
          <vue-base64-file-upload class="v1" accept="image/png,image/jpeg"
            image-class="v1-image" input-class="v1-input" :max-size="imageMaxSize"
            @size-exceeded="onSizeExceeded" @load="onLoad" />
        </FormItem>
        <FormItem :style="{width: '70%'}">
          <div :style="{textAlign: 'center'}">
            <Button type="primary" @click="handleSubmit">提交</Button>
          </div>
        </FormItem>
      </Form>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module";
import {InputNumber,Input,Select,Option,Button,Form,FormItem,Message} from "view-design";
import Loading from "@/components/Loading";
import Uuid from "uuid";
import VueBase64FileUpload from 'vue-base64-file-upload';
export default {
  name: "SprignCloudConfigAddView",
  components: {
    InputNumber,Loading,Input,Select,Option,Button,Form,FormItem,Message,VueBase64FileUpload
  },
  data: function() {
    let vm = this;

    return {
      formRef: Uuid.v1(),
      formData: {
        'taxRegistrationCert':'',
        'register': false
      },
      imageMaxSize: 3,  // 上传图片的大小限制(megabytes)
      columns: []
    };
  },
  methods: {
    onLoad(dataUri) {
      this.formData.taxRegistrationCert = dataUri;
    },
    onSizeExceeded(size) {
      this.$Message.warning({content: `图片${size}Mb超出了${this.imageMaxSize}Mb限制!`, duration: 4});
    },
    onChangeRegister(status) {
      this.formData.register = status;
    },
    handleSubmit: function() {
      let vm = this;
      console.log(vm);
      this.$refs[this.formRef].validate(async valid => {
        if (valid) {
          let formData = JSON.parse(JSON.stringify(vm.formData));
          let response = await vm.$store.dispatch(`${namespace}/save`,formData);
          if (response.errorCode === 0) {
            this.$Message.success("提交成功");
            this.$router.push({path: "/admin/taxpayer/list"});
          }
        }
      });
    }
  },
  computed: {
    formDataCheckRules: function() {
      return {
        sn: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        name: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        num: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        legalPersonName: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        contactsName: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        phone: [{required: true, message: "请输入", trigger: "blur", type: "string"},
                {pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur"}],
        cityName: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        address: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        drawer: [{required: true, message: "请输入", trigger: "blur", type: "string"}],
        state: [{required: true, message: "请选择", trigger: "change", type: "string"}],
        taxRegistrationCert: [{required: true, message: "请上传", trigger: "change", type: "string"}]
      };
    },
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style>
  .v1-image {
    width: 100%
  }
</style>
